<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">{{ title }}收货地址</div>
        <div @click="deleteAddress()" v-if="this.title=='编辑'" class="del">删除</div>
      </div>
    </van-sticky>
    <div class="body">
      <van-form ref="form">
        <van-field
            v-model="personData.name"
            label="收货人"
            placeholder="请输入收货人"
            input-align="right"
            :rules="[{ validator, message: '收货人长度必须为2-16个字符' }]"
        />
        <van-field
            v-model="personData.phone"
            label="手机号码"
            placeholder="请输入手机号码"
            input-align="right"
            :rules="[
              { required: true, message: '请填写您的手机号码！',trigger: 'blur' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}
            ]"
        />
        <van-cell title="所在地区" is-link :value="personData.areaName" @click="showArea = true"/>
        <!--      <van-field v-model="personData.area" clickable name="area" label="所在地区：" placeholder="点击选择省市区"-->
        <!--                  :rules="[{ required: true, message: '请选择所在地区',trigger:'onChange' }]"/>-->
        <van-field
            v-model="personData.address"
            label="详细地址"
            placeholder="请输入详细地址"
            input-align="right"
            :rules="[
              { required: true, message: '请输入详细地址！',trigger: 'blur' },
              { pattern: /^.{2,60}$/, message: '详细地址长度必须为2-60个字符'}
            ]"
        />
        <div class="field-with-switch">
          <van-field label="设为默认地址"></van-field>
          <van-switch v-model="defaultValue" size="24"></van-switch>
        </div>
      </van-form>
    </div>
    <div class="footer">
      <div class="size" @click="save">保存</div>
    </div>
    <van-popup v-model="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="getAreaData" @cancel="showArea = false"/>
    </van-popup>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data';
import {addAddress, deleteAddress} from "@/api/my";
import {Dialog} from 'vant';
export default {
  name: "addAddress",
  data() {
    return {
      title: '',
      back: require("@/assets/my/back.png"),
      showArea: false,
      personData: {
        name: '',
        phone: '',
        area: '',
        areaName: '',
        address: '',
        isDefault: 0, //0 默认 1 非默认
        switchValue: false
      },
      areaList: {}, // 数据格式见 Area 组件文档,
      defaultValue: false,
    }
  },
  created() {
    this.areaList = areaList
  },
  mounted() {
    this.$route.query.name === '新增' ? this.title = '新增' : this.title = '编辑'
    this.$route.query.obj ? this.personData = this.$route.query.obj : ''
    this.personData.isDefault === 0 ? this.defaultValue = true : this.defaultValue = false
  },
  methods: {
    validator(val) {
      return /^.{2,16}$/.test(val);
    },
    validatorAddress(val) {
      return /^.{2,60}$/.test(val);
    },
    handleBack() {
      this.$router.go(-1);
    },
    getAreaData(values) {
      this.personData.areaName = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
      this.personData.area = values
          .filter((item) => !!item)
          .map((item) => item.code)
          .join('/');
      console.log('------area', this.personData.area);
      this.showArea = false;
    },
    save() {
      this.defaultValue === true ? this.personData.isDefault = 0 : this.personData.isDefault = 1
      if (this.personData.name && this.personData.phone && this.personData.area && this.personData.address) {
        this.$refs.form.validate().then(() => {
          addAddress(this.personData).then(res => {
            console.log('add', res)
            if (res.success) {
              if (this.personData.id) {
                this.$toast.success('编辑地址成功')
                this.$router.go(-1)
              } else {
                this.$toast.success('新增地址成功')
                this.$router.go(-1)
              }
            }
          })
        }).catch(() => {
          console.log('校验不成功')
          this.$toast('请按照规范输入正确格式的信息')
        })
      } else {
        this.$toast('地址及联系人信息不能为空')
      }

    },
    deleteAddress() {
       Dialog.confirm({
        title: '提示',
        message: '您确定要删除该收货地址吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
          let data = {
            id: this.personData.id
          }
          deleteAddress(data).then(res => {
            console.log('delete', res)
            if (res.success) {
              this.$toast.success('删除成功')
              this.$router.go(-1)
            }
          })
      }).catch(err => {

      })
     
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 500;
    }
    //position: relative;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }

    .del {
      position: absolute;
      right: 15px;
    }

  }

  .body {
    padding-top: 30px;
     /deep/.van-cell {
      font-size: 17px;
      } 
    .field-with-switch {
      display: flex;
      align-items: center;
    }

    .field-with-switch .van-switch {
      //flex: 1;
      //margin-right: 10px;
      position: absolute;
      right: 25px;

    }

    .field-with-switch /deep/ .van-switch--on {
      background-color: rgba(242, 150, 0, 1);
    }
    
  }
   /deep/ .van-action-sheet__name {
    font-size: 20px;
  }
  /deep/ .van-picker-column__item {
    font-size: 20px;
  }
  /deep/ .van-picker__confirm {
    font-size: 20px;
  }
  /deep/ .van-picker__cancel{
    font-size: 20px;
  }
  /deep/ .van-ellipsis{
    font-size: 20px;
  }
  /deep/.van-dialog__message {
    font-size: 17px;
   }
   .van-cell {
    color: #646566;;
   }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .size {
      width: 141px;
      height: 38px;
      opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      line-height: 38px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
  }
}
</style>
